<template>
	<view class="label">
		<view class="label-box">
			 <view class="label-header">
				 <view class="label_title">我的标签</view>
				 <view class="label_edit" @click="editLabel">{{is_edit? '完成' : '编辑'}}</view>
			 </view>
			 <uni-load-more v-if="loading" status="loading" iconType="snow"></uni-load-more>
			 <view v-if="!loading" class="label-content">
				 <view class="label-content_item" v-for="(item, index) in labelList" :key="item._id">
				   {{item.name}}
				   <uni-icons v-if="is_edit" class="icons-close" type="clear" size="15" color="red" @click="del(index)"></uni-icons>
				 </view>
				 <view v-if="labelList.length === 0 && !loading" class="no-data">
					 当前没有数据
				 </view>
			 </view>
		</view>
		
		<view class="label-box">
			 <view class="label-header">
				 <view class="label_title">标签推荐</view>
			 </view>
			  <uni-load-more v-if="loading" status="loading" iconType="snow"></uni-load-more>
			 <view v-if="!loading" class="label-content">
				 <view class="label-content_item" v-for="(item, index) in list" :key="item._id" @click="add(index)">{{item.name}}</view>
			 </view>
			 <view v-if="list.length === 0 && !loading" class="no-data">
			 					 当前没有数据
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_edit:false,
				labelList:[],
				list:[],
				loading:true
			}
		},
		onLoad() {
			//自定义事件uni.$emit()，自定义事件只能在打开的页面触发
			this.getLabel()
		},
		methods: {
			editLabel(){
				// this.is_edit = !this.is_edit
				if(this.is_edit){
					this.is_edit = false
					this.setUpdateLabel(this.labelList)
				}else{
					this.is_edit = true
				}
			},
			add(index){
				if(!this.is_edit) return
				this.labelList.push(this.list[index])
				this.list.splice(index,1)
			},
			del(index){
				if(!this.is_edit) return
				this.list.push(this.labelList[index])
				this.labelList.splice(index,1)
			},
			setUpdateLabel(label){
				console.log(label)
				let newArrIds=[]
				label.forEach(item=>{
					newArrIds.push(item._id)
				})
				uni.showLoading()
				console.log(newArrIds)
				this.$api.update_label({
					// user_id
					label:newArrIds
				}).then( (res)=>{
					uni.hideLoading()
					uni.showToast({
						title:"变更成功",
						icon:"none"
					})
					uni.$emit("labelChange")
				})
			},
			getLabel(){
				this.loading=true
				this.$api.get_label({
					type:'all'
				}).then((res)=>{
					
					console.log(res)
					const {data}=res
					//找出current是true的数据
					this.labelList = data.filter(item =>item.current)
					//找出current是false的数据
					this.list = data.filter(item =>!item.current)
					this.loading=false
				}).catch({})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f5f5;
}
.label{
	
	.label-box{
		background-color: #fff;
		margin-bottom: 10px;
		
		.label-header{
			display:flex;
			justify-content:space-between;
			padding:10px 15px;
			font-size:14px;
			color:#666;
			border-bottom:1px #f5f5f5 solid;
			
			.label_edit{
				color:#30b33a;
				font-weight: bold;
			}
		}
		.label-content{
			display: flex;
			flex-wrap: wrap;
			padding:15px;
			padding-top:0;
			
			.label-content_item{
				position: relative;
				padding:2px 5px;
				margin-top:12px;
				margin-right:10px;
				border-radius:5px;
				border: 1px #666 solid;
				tont-size:14px;
				color:#666;
				
				.icons-close{
					position: absolute;
					right:-6px;
					top:-6px;
					background-color: #fff;
					border-radius: 50%;
				}
			}
		}
	}
}
.no-data{
	width:100%;
	text-align: center;
	padding:50px 0;
	color:#999;
	font-size: 14px;
}
</style>
